<template>
  <div class="app">
    <h2>求和为:{{sum}}</h2>
    <h2>年龄为:{{person.age}}</h2>
    <h2>名字为:{{person.name}}</h2>
    <h2>汽车信息:{{car}}</h2>
    <button @click="changeSum">sum+1</button>
    <button @click="changeName">changeName</button>
    <button @click="changeAge">changeAge</button>
    <button @click="changePerson">改变人</button>
    <span>|</span>
    <button @click="changeBrand">修改品牌</button>
    <button @click="changeColor">修改颜色</button>
    <button @click="changeEngine">修改引擎</button>
    <!--  <button @click="changeCar">修改车</button>-->

  </div>
</template>
<script setup lang="ts" name="App">
import {ref, shallowRef, shallowReactive, reactive} from "vue";
//shallowRef 解决效率问题提高性能 浅层次ref 只处理第一层的ref 所以此时的peron 中属性不能单独修改但是可以修改person
// shallowReactive 只能处理浅层次即第一层
//俩者都绕开深度响应浅层式API创建的状态在其顶层都是响应式的,让属性访问更快
let sum=shallowRef(0)
let person=shallowRef({
  name:'张三',
  age:18
})

//reactive
let car=shallowReactive({
  brand:'BNW',
  options:{
    color:'red',
    engine:'V8'
  }
})
function changeColor(){
  car.options.color='orange'
}
function changeBrand(){
  car.brand="法拉利"

}
function changeEngine(){
  car.options.engine="tomcat引擎"
}
// function changeCar(){
// //reactive不能整个对象修改
//   Object
// }




//原生js
function changeSum(){
  sum.value+=1
}
function changeName(){
  person.value.name="里斯"
}
function  changeAge(){
  person.value.age=99
}
function  changePerson(){
  person.value={name:'Test',age:16}
}


</script>
<style scoped>


.app{
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button{
  margin-top: 20px;
}
</style>